<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>

<?php
$_htmlId = $this->getHtmlId() ? $this->getHtmlId() : '_' . uniqid();
$_colspan = $this->isAddAfter() ? 2 : 1;
?>

<div class="design_theme_ua_regexp" id="grid<?php echo $_htmlId; ?>">
    <table cellspacing="0" class="data-table">
        <thead>
        <tr>
            <?php foreach ($this->getColumns() as $columnName => $column): ?>
            <th><?php echo $column['label']; ?></th>
            <?php endforeach;?>
            <th class="col-actions" colspan="<?php echo $_colspan; ?>">Action</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <td colspan="<?php echo count($this->getColumns())+$_colspan; ?>" class="col-actions-add">
                <button id="addToEndBtn<?php echo $_htmlId; ?>" class="action- add" title="<?php echo __('Add'); ?>" type="button">
                    <span><?php echo $this->getAddButtonLabel(); ?><?php echo __('Add'); ?></span>
                </button>
            </td>
        </tr>
        </tfoot>
        <tbody id="addRow<?php echo $_htmlId; ?>"></tbody>
    </table>
    <input type="hidden" name="<?php echo $this->getElement()->getName(); ?>[__empty]" value="" />

    <script type="text/javascript">

        // create row creator
        var arrayRow<?php echo $_htmlId ?> = {

            // define row prototypeJS template
            template: new Template(
                    '<tr id="#{_id}">'
                    <?php foreach ($this->getColumns() as $columnName => $column): ?>
                            + '<td>'
                            + '<?php echo $this->renderCellTemplate($columnName)?>'
                            + '<\/td>'
                        <?php endforeach; ?>

                    <?php if ($this->isAddAfter()): ?>
                            + '<td><button class="action- add" type="button" id="addAfterBtn#{_id}"><span><?php echo __('Add after'); ?><\/span><\/button><\/td>'
                        <?php endif; ?>

                            + '<td class="col-actions"><button onclick="arrayRow<?php echo $_htmlId ?>.del(\'#{_id}\')" class="action- delete" type="button"><span><?php echo __('Delete'); ?><\/span><\/button><\/td>'
                            +'<\/tr>'
            ),

            add: function(rowData, insertAfterId) {
                // generate default template data
                var templateValues;

                // Prepare template values
                if (rowData) {
                    templateValues = rowData;
                } else {
                    var d = new Date();
                    templateValues = {
                <?php foreach ($this->getColumns() as $columnName => $column): ?>
                    <?php echo $columnName ?>: '',
                    <?php endforeach; ?>
                        _id: '_' + d.getTime() + '_' + d.getMilliseconds()
                };
            }

            // Insert new row after specified row or at the bottom
            if (insertAfterId) {
            Element.insert($(insertAfterId), {after: this.template.evaluate(templateValues)});
        } else {
            Element.insert($('addRow<?php echo $_htmlId ?>'), {bottom: this.template.evaluate(templateValues)});
        }

        // Fill controls with data
        if (rowData) {
            var rowInputElementNames = Object.keys(rowData.column_values);
            for (var i = 0; i < rowInputElementNames.length; i++) {
                if ($(rowInputElementNames[i])) {
                    $(rowInputElementNames[i]).value = rowData.column_values[rowInputElementNames[i]];
                }
            }
        }

        // Add event for {addAfterBtn} button
        <?php if ($this->isAddAfter()): ?>
        Event.observe('addAfterBtn' + templateValues._id, 'click', this.add.bind(this, false, templateValues._id));
            <?php endif; ?>
        },

        del: function(rowId) {
            $(rowId).remove();
        }
        }

        // bind add action to "Add" button in last row
        Event.observe('addToEndBtn<?php echo $_htmlId ?>', 'click', arrayRow<?php echo $_htmlId ?>.add.bind(arrayRow<?php echo $_htmlId ?>, false, false));

        // add existing rows
        <?php
        foreach ($this->getArrayRows() as $_rowId => $_row) {
            echo "arrayRow{$_htmlId}.add(" . $_row->toJson() . ");\n";
        }
        ?>

        // Toggle the grid availability, if element is disabled (depending on scope)
        <?php if ($this->getElement()->getDisabled()):?>
        toggleValueElements({checked: true}, $('grid<?php echo $_htmlId; ?>').parentNode);
            <?php endif;?>

    </script>
</div>